<template>
	<layout>
		<div class="top">
			<el-input v-model="key" placeholder=""></el-input>
			<el-button type="" @click="$router.push('/product/create')"
				>新增商品</el-button
			>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column  label="图片">
                <template slot-scope="scope">
                    <img
                        style="width:50px; height:50px;"
                        :src="'http://localhost:7002/' + scope.row.img"
                    ></img>
                </template slot-scope="scope">
            </el-table-column>
			<el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="cate" label="类别"> </el-table-column>
			<el-table-column style='width:150px;' label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="$router.push('/product/edit/' + scope.row.id)"
						>编辑</el-button
					>
					<el-button
						size="mini"
						@click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			stytle="margin:20px;"
			fixed="right" 
            @current-change="getData"
			:current-page="currentPage"
			:page-size="2"
			layout="total,  prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
	</layout>
</template>  //轮播

<script>
export default {
	data() {
		return {
			tableData: [{}],
			key: '',
            total:1,
            currentPage:1,
		}
	},
	created() {
		this.getData()
	},
	watch: {
		key(val) {
			this.getData()
		},
	},
	methods: {
		getData(page) {
            if(page){
                this.currentPage =page
            }
			let path = `/product/page?currentPage=${this.currentPage}`
			if (this.key) {
				path = `/product/page?currentPage=${this.currentPage}&key=${this.key}`
			}

			this.$http.get(path).then((res) => {
				if (res.errcode == 0) {
                    let data =res.data
					this.tableData = data.list  //列表
                    this.total = data.total  //总共多少页
				}
			})
		},
		handleDelete(index, row) {
			this.$http
				.post('product/trash', {
					id: row.id,
				})
				.then((res) => {
					this.tableData.splice(index, 1)
				})
		},
	},
}
</script>

<style>
.top {
	display: flex;
	justify-content: space-between;
}
.el-input {
	width: 180px;
}
</style>
